Skip to main content

Installation

Installing TypeScript​

TypeScript compiler (tsc) is required to convert .ts files into .js.

Install globally (for all projects):

npm install -g typescript
  • This installs the tsc (TypeScript Compiler) command globally.

Check Installation

tsc -v

Compiling TypeScript Files Manually​

Let’s say you have a file app.ts:

let message: string = "Hello, TypeScript!";
console.log(message);

Compile it to JavaScript:

tsc app.ts

This creates app.js:

var message = "Hello, TypeScript!";
console.log(message);

Then run it with Node:

node app.js

Problem: If you have multiple .ts files or want custom settings (like targeting ES6, strict mode, etc.), compiling manually each time becomes painful.

Solution: tsconfig.json

What is tsconfig.json​

tsconfig.json is a configuration file that tells the TypeScript compiler how to compile your project.

You create it with:

tsc --init

This generates a file like:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "rootDir": "./src",
    "outDir": "./dist",
    "strict": true
  }
}

Why use tsconfig.json​

  • Instead of typing tsc file.ts again and again, you just run:
tsc

and it compiles the whole project based on rules inside tsconfig.json.

  • Makes collaboration easier: All developers follow the same TypeScript rules.

  • Helps organize source files (src/) and output files (dist/).

  • Enforces strict checks (like type safety) automatically.

Integrate TypeScript with npm scripts​

In package.json, add a scripts section like this:

{
  "name": "my-project",
  "version": "1.0.0",
  "scripts": {
    "build": "tsc",
    "watch": "tsc --watch",
    "start": "npm run build && node dist/index.js",
    "dev": "ts-node-dev src/index.ts"
  },
  "devDependencies": {
    "typescript": "^5.2.0",
    "ts-node-dev": "^2.0.0"
  }
}
  • "build": "tsc" → Runs TypeScript compiler according to your tsconfig.json.
  • "watch": "tsc --watch" → Watches for file changes and recompiles automatically.

Example Project Structure​

my-project/
 ├── src/
 │    ├── app.ts
 │    └── utils.ts
 ├── dist/   (will be generated)
 └── tsconfig.json

src/app.ts

import { add } from "./utils";

let result: number = add(5, 10);
console.log("Result:", result);

src/utils.ts

export function add(a: number, b: number): number {
  return a + b;
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "rootDir": "./src",
    "outDir": "./dist",
    "strict": true
  }
}

Compile & Run

tsc       # compiles everything in src/ to dist/
node dist/app.js

Key tsconfig.json Options​

Here are some important ones:

  1. target → Specifies which version of JavaScript to compile into.

    • "ES5" → older browsers
    • "ES6" or "ES2015" → modern JavaScript

  2. module → Defines how modules are compiled.

    • "commonjs" → for Node.js
    • "esnext" → for modern browsers with ES modules

  3. rootDir: Where your TypeScript source files are located.

  4. outDir: Where compiled JavaScript files will be stored.

  5. strict → Turns on strict type-checking. It enables multiple rules like:

  • noImplicitAny
  • strictNullChecks
  • strictBindCallApply

  1. esModuleInterop: Helps when importing CommonJS modules (like express).

    "esModuleInterop": true

    Without this, you’d need:

    import * as express from "express";

    With it, you can write:

    import express from "express";

  2. include & exclude - Control which files TS should compile.

    "include": ["src/**/*"],
    "exclude": ["node_modules", "dist"]
    • include → compile all files in src/.
    • exclude → ignore node_modules & dist/.

Setting Up TypeScript with Node.js​

Initialization​

  1. Initialize a Node.js Project

    mkdir ts-node-app
    cd ts-node-app
    npm init -y

  2. Install TypeScript

    npm install typescript --save-dev

  3. Install Node.js type definitions

    TypeScript needs type definitions for Node.js APIs:

    npm install @types/node --save-dev

  4. Initialize TypeScript Configuration

    npx tsc --init

    Basic tsconfig.json for Node.js:

    {
      "compilerOptions": {
        "target": "ES2020",
        "module": "commonjs",
        "rootDir": "./src",
        "outDir": "./dist",
        "strict": true,
        "esModuleInterop": true
      }
    }

Adding Development Tools​

  1. ts-node: Run TypeScript directly without compiling manually.

    npm install ts-node --save-dev

  2. nodemon: Automatically restarts Node server on code changes.

    npm install nodemon --save-dev

  3. Add a script in package.json:

    "scripts": {
      "dev": "nodemon --watch 'src/**/*.ts' --exec 'ts-node' src/index.ts"
    }

    Now, npm run dev will run your TypeScript Node.js server and reload on changes.

Running the Project​

  1. Compile manually (optional):

    npx tsc

  • Compiles TypeScript from src/ to dist/.

  • Run compiled JS:

    node dist/index.js

  1. Or run directly with ts-node:

    npm run dev